<template>
    <div class="flex_col dps_root">
        <div class="flex_col m10 p10 card" 
            v-for="(item, index) in globalDevices" :key="index" 
            :style="{ backgroundColor: background(item) }"
            @click="onDeviceSelect(item)">
            <label class="flex_center_self">{{ item.name }}</label>
            <div class="flex_row_center mt5">
                <label>MAC地址:</label>
                <label>{{ item.mac_addr }}</label>
            </div>
            <div class="flex_row_center mt5">
                <label>软件版本:</label>
                <label>{{ item.ipc_version }}</label>
            </div>
            <div class="flex_row_center mt5">
                <label>tick时间:</label>
                <label>{{ formatDate(item.tick_timestamp) }}</label>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { type TbDevice } from '@/service/device';
import { deviceInit, globalDevices, selectDevice } from '@/utils/react';
import { runAction } from '@/utils/ui';
import { formatDate } from '@/utils/utils';


async function init() {
    runAction('设备', '查询设备', async () => {
        await deviceInit();
    });
}

function onDeviceSelect(item: TbDevice) {
    selectDevice.value = item;
}

function background(item: TbDevice) {
    if (item.id == selectDevice.value?.id) {
        return '#ddd';
    }
    return 'white';
}

init();

</script>

<style scoped>

.dps_root {
    overflow-y: scroll;
    height: 100vh;
}

</style>

